<template>
  <div id='wrap'>
    <h1>使用内置的fetchAPI进行请求</h1>
    <button @click="getRolesPageHandler">请求角色分页列表</button>
    <button @click="postRolesHandler">角色新增功能</button>
    <button @click="putRolesHandler">角色修改功能</button>
    <button @click="deleteRolesHandler">角色删除功能</button>
    <button @click="patchRolesHandler">角色禁用功能</button>
    <div v-if="roles.length>0">
      <div v-for="item in roles" :key="item.id" class="box">
        <span>角色ID:{{ item.id }}</span>
        <span>角色名称:{{ item.name }}</span>
        <span>角色编码:{{ item.code }}</span>
        <span>排序:{{ item.sort }}</span>
        <span>角色状态:{{ item.status }}-正常</span>
      </div>
    </div>
  </div>
</template>

<script lang='ts'>
export default {
  name: 'scu42',
}
</script>

<script lang='ts' setup>
import { ref } from "vue";
import { getRolesPage,postRoles,putRoles,deleteRoles,patchRoles } from "@/service/day20250107/scu42";
interface Role{
  id:number
  name:string
  code:string
  sort:number
  status:number
}
const roles=ref<Role[]>([])
const getRolesPageHandler=async()=>{
  const resJson=await getRolesPage()
  console.log(resJson);
  roles.value=resJson.data.list
}

const postRolesHandler=async()=>{
  const resJson=await postRoles()
  console.log(resJson);
}

const putRolesHandler=async()=>{
  const resJson=await putRoles()
  console.log(resJson);
}

const deleteRolesHandler=async()=>{
  const resJson=await deleteRoles()
  console.log(resJson);
}

const patchRolesHandler=async()=>{
  const resJson=await patchRoles()
  console.log(resJson);
}

// import { ref,onMounted } from 'vue'
// const roles=ref([])
// const fetchGetRolesList=async()=>{
//   const myHeaders=new Headers()

//   myHeaders.append('Authorization','eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJVc2VySW5mbyI6eyJ1c2VySWQiOjIsInVzZXJuYW1lIjoiYWRtaW4iLCJuaWNrbmFtZSI6Iuezu-e7n-euoeeQhuWRmGFkbWluIiwiZGVwdElkIjoxLCJyb2xlcyI6IkFETUlOIn0sImlzcyI6ImR5czYyMzAiLCJleHAiOjE3MzIwMTU0ODMsIm5iZiI6MTczMTk3OTQ4MywiaWF0IjoxNzMxOTc5NDgzfQ.9xhdL57Qs38Mlm0K-TCwgrQjET1ZS2jUZhIOob0-pGk')

//   const requestOptions:RequestInit={
//   method:'GET',
//   headers:myHeaders,
//   redirect:'follow',
//   mode:'cors'
//   }

//   const res=await fetch('http://192.168.8.4:4523/m1/5708658-5389884-d3d6fe3f/roles/page?keywords=管理员&pageNum=1&pageSize=10',requestOptions)

//   if(res.ok){
//     const resJson=await res.json()
//     console.log(resJson,'resJson');
//     roles.value=resJson.data.list
//     console.log(roles.value);
//   }
// }
// onMounted(async()=>{
//   await fetchGetRolesList()
// })
</script>

<style scoped lang='scss'>
.box {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  span {
    margin: 10px;
    padding: 10px;
    border-radius: 10px;
    border: 2px solid #409eff;
    background-color: #40e2ff;
  }
}
</style>
